<template>
  <div class="VideoApi-box">
    <div class="form-box">
      <div class="form-header">
        <van-cell-group>
          <van-field v-model="VideoUrl" placeholder="输入视频链接" />
        </van-cell-group>
        <van-button type="info" @click="parsingVideo()">开始解析</van-button>
      </div>
      <div class="form_bodyer">
        <van-dropdown-menu active-color="#1989fa" class="select-box">
          <van-dropdown-item
            :options="dropdownData"
            @change="Select_url"
            :title="dropdownStr"
            style="width:80%"
          />
        </van-dropdown-menu>
      </div>

      <iframe
        :src="VideoSrc"
        width="100%"
        style="height:50vh"
        frameborder="0"
        allow="autoplay; encrypted-media"
        allowfullscreen
      ></iframe>
    </div>
  </div>
</template>

<script>
export default {
  name: "VideoApi",
  data() {
    return {
      VideoSrc: "https://www.h8jx.com/jiexi.php?url=",
      dropdownStr: "小蒋极致云解析",
      VideoUrl: "",
      dropdownData: [
        {
          text: "猪蹄解析",
          value: "0",
          url: "https://jx.iztyy.com/svip/?url="
        },
        {
          text: "小蒋极致云解析",
          value: "1",
          url: "https://www.kpezp.cn/jlexi.php?url="
        },
        { text: "8090解析", value: "2", url: "https://www.8090.la/8090/?url=" },
        {
          text: "超快云解析",
          value: "3",
          url: "https://jx.xiaolangyun.com/?url="
        },
        {
          text: "全民解析",
          value: "4",
          url: "https://jx.quanmingjiexi.com/?url="
        },
        { text: "云端解析", value: "5", url: "https://sb.5gseo.net/?url=" },
        {
          text: "j8解析",
          value: "6",
          url: "https://www.h8jx.com/jiexi.php?url="
        }
      ]
    };
  },
  mounted() {},
  methods: {
    parsingVideo() {
      //解析视频得方法
      if (this.VideoUrl !== "") {
        this.VideoSrc += this.VideoUrl;
        console.log(this.VideoSrc);
      } else {
        alert("请输入视频链接");
      }
    },
    Select_url(val) {
      console.log(val);
      if (this.VideoUrl !== "") {
        this.VideoSrc = this.dropdownData[val].url + this.VideoUrl;
        this.dropdownStr = this.dropdownData[val].text;
      } else {
        alert("请输入视频链接");
      }

      //拿到对应下标，并设置对应的title
    }
  }
};
</script>

<style lang="scss" scoped>
.VideoApi-box {
  width: 100%;
  height: 100%;
  // background-image: linear-gradient(120deg,#e0c3fc 0%,#8ec5fc 100%);
  background-color: #f3f3f3;
  .form-box {
    padding: 20px;
    .form-header,
    form_bodyer {
      display: flex;
      justify-content: center;
    }
    .select-box {
      width: 92%;
      margin: 10px auto;
    }
  }
}
.form-box {
  height: 100%;
}
</style>
